<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令系统</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>

</head>
<body>

<div id="app">

   <div v-text="msg1"></div>
   <div v-html="msg2"></div>

    <div v-if="msg3">哈哈哈</div>
    <button @click="changeState" >v-if显示隐藏哈哈哈</button>

    <div v-show="msg4">v-show乖巧的小孩</div>
    <button @click="changeState1">v-show显示隐藏</button>

    <div v-if="Math.random() > 0.5">
        这个值大于0.5
    </div>
    <div v-else>

        这个值小于0.5
    </div>

    <hr>

    <ul>
        <li v-for="(item,index) in arr">
            <p>{{index}}</p>
            <p>{{item.name}}</p>
            <p>{{item.age}}</p>
        </li>

    </ul>

    <hr>


    <div v-for="(vale,key) in dic">

        <h4> {{key}} -- {{vale}}</h4>

    </div>















</div>

<script>

    new Vue({

        el:"#app",
        template:"",
        data:function () {
            return{

                msg1:"weixinxin",
                msg2:"<h2>这里是标题啦</h2>",
                msg3:true,
                msg4:true,
                arr:[
                    {id:1,name:"李福超",age:27},
                    {id:2,name:"邢伟新",age:27},
                    {id:1,name:"邢伟月",age:19},
                    ],
                dic:{
                    name:"zhoujielun",
                    fav:"音乐人"

                }



            }

        },
        methods:{

            changeState:function () {

                this.msg3 = !this.msg3;
            },
            changeState1:function () {

                this.msg4 = !this.msg4;
            }


        }




    })



</script>



</body>
</html>